<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>




<div id="app">
    当前年龄为:{{age}}
    <heima43 @haizi="increment" @tinghua="decrement" @jianwu="rw"></heima43>

</div>



<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    //局部组件,需要声明注册到某个vue实例中才可以使用
    let heima43 = {
        template:
            `<div>
                   <button @click="add">+</button>
                   <button @click="reduce">-</button>
                   <button @click="jianwusui">-5</button>
             </div>`,
        methods:{
            add(){
                this.$emit("haizi");
            },
            reduce(){
               this.$emit("tinghua");
            },
            jianwusui(){
                this.$emit("jianwu");
            }
        }
    };


    var vm = new Vue({
        el:"#app",
        components:{
            heima43
        },
        data:{
           age:30
        },
        methods:{
            increment(){
                this.age++
            },
            decrement(){
                this.age--
            },rw(){
                this.age = this.age-5;
            }
        }
    })
</script>


</body>
</html>